<template>
	<view class="container page-box">
		<!-- form -->
		<view class="pad-32">
			<map style="width: 100%;" id="map" :longitude="lgt" :latitude="lat" scale="13"></map>
			<!-- <up-button :customStyle="{border:0,marginTop: '30rpx',}" @tap="handleChooseLocation">选择地址</up-button> -->
			<view class="mar-top-30">
				<up-form labelPosition="left" :model="userInfo" ref="form1" labelWidth="160rpx"
					:labelStyle="{fontSize: '28rpx',color:'#646464'}">
					<view class="bg-white pad-left-right-24 pad-top-bottom-16 radius24">
						<u-form-item label="联系地址" prop="address" @tap="handleChooseLocation">
							<up-textarea placeholderClass="textarea-style" autoHeight placeholder="请选择联系地址"
								v-model="userInfo.address" disabled></up-textarea>
						</u-form-item>
						<up-form-item label="详细地址" prop="detail">
							<up-input clearable placeholder="请输入详细地址，单元，门牌号" v-model="userInfo.detail"
								border="none"></up-input>
						</up-form-item>
						<u-form-item label="联系电话" prop="tel">
							<up-input type="number" clearable placeholder="请输入联系电话" v-model="userInfo.tel"
								border="none"></up-input>
						</u-form-item>
					</view>
				</up-form>
			</view>
			<up-button :customStyle="customStyle" class="font-32 button bg-theme" shape="circle"
				@click="submit">保存</up-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onShow,
		onUnload,
		onLoad
	} from '@dcloudio/uni-app'

	import {
		addressAdd,
		postAddressUpdate
	} from '@/api/index.js'

	const userInfo = ref({
		address: '',
		tel: '',
		detail: '',
		region: '',
		street: '',
		id: ""
	})

	// 页面初始化
	onLoad((options) => {
		if (options.id) {
			uni.setNavigationBarTitle({
				title: '修改地址'
			})
			let address = uni.getStorageSync('address');
			//数据回显
			userInfo.value = address;
			let {
				province,
				city,
				region,
				street
			} = address;
			userInfo.value.address = `${province}${city}${region}${street}`;
			// 区
			userInfo.value.region = region;
			// 街道
			userInfo.value.street = street;
			userInfo.value.id = options.id;
		}
	})

	// 获取地址
	const handleChooseLocation = () => {
		uni.getSetting({
			success(res) {
				if (!res.authSetting['scope.userLocation']) {
					// 位置权限未授权，发起授权请求
					uni.authorize({
						scope: 'scope.userLocation',
						success() {
							// 用户已授权，可以直接调用uni.getLocation获取位置
							uni.getLocation({
								type: 'gcj02', // 使用 'wgs84' 坐标系
								success: function(res) {
									// 成功获取定位信息
									const {
										latitude,
										longitude
									} = res;
									lgt.value = longitude;
									lat.value = latitude;
								}
							});
						},
						fail() {
							// 用户拒绝授权，需要引导用户到设置中开启
							uni.showModal({
								title: '提示',
								content: '此功能需要获取您的地理位置，请确认授权',
								success: function(modalRes) {
									if (modalRes.confirm) {
										// 引导用户到设置中去改变权限
										uni.openSetting();
									}
								}
							});
						}
					});
				} else {

					uni.getLocation({
						type: 'gcj02', // 使用 'wgs84' 坐标系
						success: (res) => {
							// 成功获取定位信息
							const {
								latitude,
								longitude
							} = res;
							const key = 'E4HBZ-OHTWG-4KUQQ-QG2Z7-ODEQZ-MDB7O'; //使用在腾讯位置服务申请的key
							const referer = '园驻'; //调用插件的app的名称

							const location = JSON.stringify({
								latitude: latitude,
								longitude: longitude
							});
							const category = '生活服务,娱乐休闲';


							console.log(location, referer, key, category)
							uni.navigateTo({
								url: 'plugin://chooseLocation/index?key=' + key +
									'&referer=' + referer +
									'&location=' + location +
									'&category=' + category
							});

						},
						fail: (err) => {
							// 处理失败情况
							console.error('获取定位失败:', err);
							if (err.errCode == 1) {
								uni.$u.toast('获取定位失败，检查设备的定位服务是否开启，并确保应用有权限使用定位服务');
							} else if (err.errCode == 2) {
								uni.$u.toast('获取定位失败，在设备的设置中打开定位权限');
							} else {
								uni.$u.toast('获取定位失败，检查设备的定位是否打开定位权限');
							}
						}
					});

				}
			}
		})
	}


	// #ifdef MP-WEIXIN
	const chooseLocation = requirePlugin('chooseLocation');
	// #endif

	//获取定位
	const lat = ref('');
	const lgt = ref('');

	onShow(() => {
		// #ifdef MP-WEIXIN
		const location = chooseLocation.getLocation();
		if (location != null) {
			let {
				province,
				city,
				district,
				name,
				latitude,
				longitude,
				address
			} = location;

			// 省
			userInfo.value.province = province;
			// 市
			userInfo.value.city = city;
			// 区
			userInfo.value.region = district;
			// 街道
			userInfo.value.street = name;

			// 地址回显
			userInfo.value.address = `${province}${city}${district}${name}`;
			// 经纬度
			userInfo.value.lat = latitude;
			userInfo.value.lgt = longitude;
		}

		uni.getLocation({
			type: 'gcj02', // 使用 'wgs84' 坐标系
			success: (res) => {
				// 成功获取定位信息
				const {
					latitude,
					longitude
				} = res;
				lgt.value = longitude;
				lat.value = latitude;
				// 在这里你可以使用 latitude 和 longitude
				// 比如显示到地图上或者进行其他操作
			},
			fail: (err) => {
				// 处理失败情况
				console.error('获取定位失败:', err);
				if (err.errCode == 1) {
					uni.$u.toast('获取定位失败，检查设备的定位服务是否开启，并确保应用有权限使用定位服务');
				} else if (err.errCode == 2) {
					uni.$u.toast('获取定位失败，在设备的设置中打开定位权限');
				} else {
					uni.$u.toast('获取定位失败，检查设备的定位是否打开定位权限');
				}

			}
		});
		// #endif
	})


	// 页面销毁清空
	onUnload(() => {
		// #ifdef MP-WEIXIN
		chooseLocation.setLocation(null);
		// #endif
	})

	// 按钮样式
	const customStyle = ref({
		background: "linear-gradient(270deg, #0055FE 0%, #5E94FF 100%)",
		color: "white",
		height: "100rpx",
		marginTop: '96rpx'
	})

	const submit = () => {

		if (userInfo.value.address == '') {
			uni.$u.toast('请选择地址');
			return
		}

		if (userInfo.value.detail == '') {
			uni.$u.toast('请输入详细地址，单元，门牌号');
			return
		}

		if (!/^1[23456789]\d{9}$/.test(userInfo.value.tel)) {
			uni.$u.toast('联系电话格式不正确');
			return
		}

		if (userInfo.value.id == "") {
			// 新增地址
			addressAdd(userInfo.value).then(res => {
				if (res.code == 200) {
					uni.$u.toast(res.msg);
					setTimeout(() => {
						uni.navigateBack();
					}, 500)
				}
			})
		} else {
			// 修改地址
			postAddressUpdate(userInfo.value).then(res => {
				if (res.code == 200) {
					uni.$u.toast(res.msg);
					setTimeout(() => {
						uni.navigateBack();
					}, 500)
				}
			})
		}


	}
</script>
<style scoped lang="scss">
	:deep(.u-form-item) {
		margin-top: 40rpx !important;
	}

	:deep(.u-textarea--disabled) {
		background: white !important;
		border: 0 none !important;
		padding: 0 !important;
	}

	:deep(.textarea-style) {
		color: #55aae5 !important;
	}

	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		.button {
			box-shadow: 0 10px 15px rgba(223, 0, 7, .1);
			height: 96rpx;
			color: white;
		}

		.color-pick {
			width: 460rpx;
			height: 72rpx;
			line-height: 72rpx;
			color: rgb(192, 196, 204);
		}

		.color-block {
			width: 460rpx;
			height: 72rpx;
			line-height: 72rpx;
			color: rgb(48, 49, 51);
		}
	}
</style>